<template>
  <div class="app-container">
    <!-- 统计信息 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="8">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <i class="el-icon-user stats-icon" style="color: #67C23A;"></i>
            <div class="stats-text">
              <div class="stats-value">{{ total }}</div>
              <div class="stats-label">已录取学生</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <i class="el-icon-star-on stats-icon" style="color: #E6A23C;"></i>
            <div class="stats-text">
              <div class="stats-value">{{ priority1Count }}</div>
              <div class="stats-label">第一志愿</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <i class="el-icon-star-off stats-icon" style="color: #909399;"></i>
            <div class="stats-text">
              <div class="stats-value">{{ priority2Count }}</div>
              <div class="stats-label">第二志愿</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 学生列表 -->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span class="card-title">已录取学生名单</span>
        <div style="float: right;">
          <el-button
            type="primary"
            icon="el-icon-download"
            size="small"
            @click="handleExport"
            :loading="exportLoading"
          >
            导出名单
          </el-button>
          <el-button
            icon="el-icon-back"
            size="small"
            @click="goBack"
          >
            返回
          </el-button>
        </div>
      </div>

      <el-table v-loading="loading" :data="studentList" border>
        <el-table-column label="序号" type="index" width="50" align="center" />
        
        <el-table-column label="学生姓名" width="120">
          <template slot-scope="scope">
            <div><strong>{{ scope.row.studentName }}</strong></div>
          </template>
        </el-table-column>
        
        <el-table-column label="学号" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.studentNo }}
          </template>
        </el-table-column>
        
        <el-table-column label="专业" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.major }}
          </template>
        </el-table-column>
        
        <el-table-column label="班级" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.className }}
          </template>
        </el-table-column>
        
        <el-table-column label="绩点" width="80" align="center">
          <template slot-scope="scope">
            <el-tag :type="getGpaType(scope.row.gpa)" size="small">
              {{ scope.row.gpa || '-' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="联系邮箱" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.email || '-' }}
          </template>
        </el-table-column>
        
        <el-table-column label="题目名称" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.topicTitle }}
          </template>
        </el-table-column>
        
        <el-table-column label="志愿" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.priority === 1 ? 'danger' : 'warning'" size="small">
              {{ scope.row.priority === 1 ? '第一志愿' : '第二志愿' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="录取时间" align="center" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.reviewTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" align="center" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 学生详情对话框 -->
    <el-dialog title="学生详情" :visible.sync="detailOpen" width="700px" append-to-body>
      <el-descriptions :column="2" border v-if="currentStudent">
        <el-descriptions-item label="学生姓名">
          {{ currentStudent.studentName }}
        </el-descriptions-item>
        <el-descriptions-item label="学号">
          {{ currentStudent.studentNo }}
        </el-descriptions-item>
        <el-descriptions-item label="专业">
          {{ currentStudent.major }}
        </el-descriptions-item>
        <el-descriptions-item label="班级">
          {{ currentStudent.className }}
        </el-descriptions-item>
        <el-descriptions-item label="绩点">
          <el-tag :type="getGpaType(currentStudent.gpa)" size="small">
            {{ currentStudent.gpa || '-' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系邮箱">
          {{ currentStudent.email || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="技术栈" :span="2" v-if="currentStudent.techStack">
          <el-tag
            v-for="(tech, index) in parseTechStack(currentStudent.techStack)"
            :key="index"
            size="small"
            type="info"
            style="margin-right: 5px; margin-bottom: 5px;"
          >{{ tech }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="题目名称" :span="2">
          {{ currentStudent.topicTitle }}
        </el-descriptions-item>
        <el-descriptions-item label="志愿优先级">
          <el-tag :type="currentStudent.priority === 1 ? 'danger' : 'warning'" size="small">
            {{ currentStudent.priority === 1 ? '第一志愿' : '第二志愿' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="录取时间">
          {{ currentStudent.reviewTime }}
        </el-descriptions-item>
        <el-descriptions-item label="申请理由" :span="2">
          <div style="white-space: pre-wrap;">{{ currentStudent.applyReason || '无' }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAcceptedStudents, exportAcceptedStudents } from "@/api/system/application";

export default {
  name: "AcceptedStudents",
  data() {
    return {
      // 遮罩层
      loading: false,
      exportLoading: false,
      // 总条数
      total: 0,
      // 学生列表
      studentList: [],
      // 详情对话框
      detailOpen: false,
      currentStudent: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  computed: {
    priority1Count() {
      return this.studentList.filter(s => s.priority === 1).length;
    },
    priority2Count() {
      return this.studentList.filter(s => s.priority === 2).length;
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询学生列表 */
    getList() {
      this.loading = true;
      listAcceptedStudents(this.queryParams).then(response => {
        this.studentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查看详情 */
    handleView(row) {
      this.currentStudent = row;
      this.detailOpen = true;
    },
    /** 导出 */
    handleExport() {
      this.$modal.confirm('是否确认导出已录取学生名单？').then(() => {
        this.exportLoading = true;
        return exportAcceptedStudents();
      }).then(response => {
        this.$download.name(response, '已录取学生名单.xlsx');
        this.exportLoading = false;
      }).catch(() => {
        this.exportLoading = false;
      });
    },
    /** 返回 */
    goBack() {
      this.$router.back();
    },
    /** 解析技术栈 */
    parseTechStack(techStack) {
      if (!techStack) return [];
      try {
        return JSON.parse(techStack);
      } catch (e) {
        return [];
      }
    },
    /** 绩点标签类型 */
    getGpaType(gpa) {
      if (!gpa) return 'info';
      if (gpa >= 3.5) return 'success';
      if (gpa >= 3.0) return '';
      if (gpa >= 2.5) return 'warning';
      return 'danger';
    }
  }
};
</script>

<style scoped lang="scss">
.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-5px);
  }
}

.stats-content {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.stats-icon {
  font-size: 48px;
  margin-right: 20px;
}

.stats-text {
  flex: 1;
}

.stats-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.stats-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
}
</style>